import React, {JSX} from "react";
import Taro from "@tarojs/taro";
import {Image, View, Text} from "@tarojs/components";
import Col, {ICol} from "../../components/view/Col";
import './index.scss'

// 使用ts的细节好处：即使好久没写这块代码了，但只要记得有这个组件，引入props的interface，就能给到智能提示
const colList: Array<ICol> = [
  // eslint-disable-next-line import/no-commonjs
  {title: '呼叫服务', icon: require('@/static/images/service/Card/1-PHONE.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '付款', icon: require('@/static/images/service/Card/2-PAY.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '会员充值', icon: require('@/static/images/service/Card/3-VIP.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: 'WIFI密码', icon: require('@/static/images/service/Card/4-WIFI.png')},
]

export default React.memo(function (): JSX.Element {
  const onRoute = (url) => {
    return Taro.navigateTo({url})
  }
  return (
    <View id='service'>
      <View className='card'>
        <View className='head align-center'>
          <Image lazyLoad className='img' src={require('@/static/images/service/Card/nav.png')}></Image>
          <Text className='text'>曼斯顿优先—豪华电竞房-8107</Text>
        </View>
        <View className='content justify-between'>
          {colList.map(colItem => (
            <Col title={colItem.title} icon={colItem.icon} key={colItem.title} />
          ))}
        </View>
      </View>

      <View className='function'>
        <View className='justify-between item'>
          <Image lazyLoad className='img' onClick={()=> onRoute('subPages/food/f_pre/index')} src={require('@/static/images/service/Function/fn0.png')}></Image>
          <Image lazyLoad className='img' src={require('@/static/images/service/Function/fn1.png')}></Image>
        </View>

        <View className='justify-between item'>
          <Image lazyLoad className='img' onClick={()=> onRoute('subPages/good/index')} src={require('@/static/images/service/Function/fn2.png')}></Image>
          <View></View>
        </View>
      </View>
    </View>
  )
})
